To be able to edit code and run cells, you need to run the notebook yourself. Where would you like to run the notebook?

This notebook takes about 20 seconds to run.

In the cloud (experimental)

Binder is a free, open source service that runs scientific notebooks in the cloud! It will take a while, usually 2-7 minutes to get a session.

On your computer

(Recommended if you want to store your changes.)

  1. Copy the notebook URL:
  2. Run Pluto

    (Also see: How to install Julia and Pluto)

  3. Paste URL in the Open box

Frontmatter

If you are publishing this notebook on the web, you can set the parameters below to provide HTML metadata. This is useful for search engines and social media.

Author 1

Switching images depending on light/dark mode

Switch your screen between light and dark mode and watch this content automatically update!

One nice way to use this in Julia is to generate two plots in two color themes, and use this to make sure that the right one is displayed to the reader.

👀 Reading hidden code
278 μs
🌝
🌚
👀 Reading hidden code
lightdark(light_plot, dark_plot)
85.9 ms

You are in light mode!

You are in dark mode!

👀 Reading hidden code
lightdark(md"You are in **light** mode!", md"You are in **dark** mode!")
64.5 ms
👀 Reading hidden code
lightdark(["☀️","🍦","⭐️", 123], ["🛰️","💂","🎱"])
31.4 ms

Test images

👀 Reading hidden code
184 μs
big (generic function with 1 method)
big(x) = @htl """
<span style="font-size: 10rem;">$x</span>
"""
👀 Reading hidden code
420 ms
gerhARD
big("gerhARD")
👀 Reading hidden code
11.1 μs
🌚
dark_plot = big("🌚")
👀 Reading hidden code
13.1 μs
🌝
light_plot = big("🌝")
👀 Reading hidden code
13.5 μs

How it works

👀 Reading hidden code
168 μs
using HypertextLiteral
👀 Reading hidden code
23.4 ms
using PlutoUI
👀 Reading hidden code
159 ms
lightdark (generic function with 1 method)
lightdark(light, dark) = PlutoUI.ExperimentalLayout.Div([
@htl("""
<style>
.plutoui-only-when-light {
display: unset;
}
.plutoui-only-when-dark {
display: none;
}

@media (prefers-color-scheme: dark) {
.plutoui-only-when-light {
display: none;
}
.plutoui-only-when-dark {
display: unset;
}
}
</style>
"""),
PlutoUI.ExperimentalLayout.Div([light]; class="plutoui-only-when-light"),
PlutoUI.ExperimentalLayout.Div([dark]; class="plutoui-only-when-dark"),
])
👀 Reading hidden code
268 ms